import React, { Component, Fragment } from 'react';
import { bus } from '../../utils/eventBus';
import { getGequurl } from '../../utils/api';
import './Play.css';

export default class play extends Component {
	state = {
		styleFlag: false,
		playList: [],
		currentDuration: '0:00',
		currentUrl: '',
		width: '',
		currentTime: '0:00',
		playingBgP: '0 -204px',
		loopBgP: '-32px -343px',
		currentPlayIndex: 0,
		isLoop: true,
		ShowListStyleFlag: 'none'
	}
	componentDidMount () {
		bus.on('syplay', async (value) => {
			var res = await getGequurl(value.id);
			var narr;
			if (!this.state.playList.some((item) => item.id === value.id)) {
				var obj = {
					id: value.id,
					name: value.name,
					url: res.data[0].url,
					artist: value.artist,
					duration: value.duration / 1000
				}
				narr = [obj, ...this.state.playList]
			} else {
				narr = [...this.state.playList]
			}
			this.setState({
				currentDuration: value.duration / 1000,
				currentUrl: res.data[0].url,
				playList: narr,
				currentPlayIndex: 0,
				playingBgP: '0 -165px'
			}, function () {
				this.audio.play();
			})
		})
	}
	lock = () => {
		let { styleFlag } = this.state;
		if (styleFlag === false) {
			this.plays.style.bottom = '0';
			this.setState({
				styleFlag: !styleFlag
			})
		} else {
			this.plays.style.bottom = '-60px';
			this.setState({
				styleFlag: !styleFlag
			})
		}
	}
	timeUpdate () {
		var m = Math.floor(this.audio.currentTime % 3600 / 60);
		var s = Math.floor(this.audio.currentTime % 60);
		m = m < 10 ? "0" + m : m;
		s = s < 10 ? "0" + s : s;
		this.setState({
			width: this.audio.currentTime * 100 / this.state.currentDuration + '%',
			currentTime: m + ':' + s
		})
	}
	playOrStop = () => {
		if (this.audio.paused === true) {
			this.audio.play();
			this.setState({
				playingBgP: '0 -165px'
			})
		} else {
			this.audio.pause();
			this.setState({
				playingBgP: '0 -204px'
			})
		}
	}
	changeBar (e) {
		let { currentDuration } = this.state;
		var left = this.bar.offsetLeft + this.plays.offsetLeft;
		var width = this.bar.offsetWidth;
		this.audio.currentTime = ((e.pageX - left) / width) * currentDuration;
		this.setState({
			width: this.audio.currentTime * 100 / currentDuration + '%'
		})
	}
	preOrNext (index) {
		let { playList, currentPlayIndex, isLoop } = this.state;
		let currentIndex = currentPlayIndex + index;
		if (isLoop) {
			if (index === -1 && !(currentIndex < 0)) {
				this.setState({
					currentUrl: playList[currentIndex].url,
					currentPlayIndex: currentIndex,
					currentDuration: playList[currentIndex].duration
				}, function () {
					this.audio.play();
				})
			} else if (index === 1 && !(currentIndex >= playList.length)) {
				this.setState({
					currentUrl: playList[currentIndex].url,
					currentPlayIndex: currentIndex,
					currentDuration: playList[currentIndex].duration
				}, function () {
					this.audio.play();
				})
			} else {
				this.setState({
					playingBgP: '0 -204px'
				})
			}
		} else {
			this.setState({
				currentUrl: playList[currentPlayIndex].url,
				currentPlayIndex: currentPlayIndex,
				currentDuration: playList[currentPlayIndex].duration
			}, function () {
				this.audio.play();
			})
		}
	}
	changeLoop () {
		let { loopBgP, isLoop } = this.state;
		if (loopBgP === '-92px -343px') {
			this.setState({
				loopBgP: '-32px -343px',
				isLoop: !isLoop
			})
		} else {
			this.setState({
				loopBgP: '-92px -343px',
				isLoop: !isLoop
			})
		}
	}
	changeShow () {
		if (this.state.ShowListStyleFlag === 'none') {
			this.setState({
				ShowListStyleFlag: 'block'
			})
		} else {
			this.setState({
				ShowListStyleFlag: 'none'
			})
		}
	}
	changeCurrentPIndex (index) {
		let { playList } = this.state;
		this.setState({
			currentUrl: playList[index].url,
			currentPlayIndex: index,
			currentDuration: playList[index].duration
		}, function () {
			this.audio.play();
		})
	}
	deleteC (index) {
		let { playList, currentPlayIndex } = this.state;
		let narr = playList;
		narr.splice(index, 1);
		if (index > currentPlayIndex) {
			this.setState({
				playList: narr
			})
		} else if (index < currentPlayIndex) {
			this.setState({
				playList: narr,
				currentPlayIndex: currentPlayIndex - 1
			})
		}
	}
	render () {
		let { currentPlayIndex, playList, currentDuration, currentUrl, currentTime, playingBgP, width, loopBgP, ShowListStyleFlag } = this.state;
		return (
			<Fragment>
				<audio onEnded={() => { this.preOrNext(1) }} onTimeUpdate={() => { this.timeUpdate() }} ref={c => this.audio = c} src={currentUrl} controls hidden></audio>
				<div className='play' ref={c => this.plays = c}>
					<div title='点击以常驻或者不常驻' onClick={this.lock} className='lock'></div>
					<div className='plays'>
						<div className='pre bg' onClick={() => { this.preOrNext(-1) }}></div>
						<div className='playing bg' style={{ backgroundPosition: playingBgP }} onClick={this.playOrStop}></div>
						<div className='next bg' onClick={() => { this.preOrNext(1) }}></div>
					</div>
					<div className='bar' ref={c => this.bar = c} onClick={(e) => this.changeBar(e)}>
						<div className='now' style={{ width: width }}></div>
					</div>
					<div className='time'>{currentTime} / {currentDuration === '0:00' ? '0:00' : "0" + Math.floor((currentDuration) % 3600 / 60) + ':' + (Math.floor((currentDuration) % 60) < 10 ? '0' + Math.floor((currentDuration) % 60) : Math.floor((currentDuration) % 60))}</div>
					<div className='loop bg' onClick={() => { this.changeLoop() }} style={{ backgroundPosition: loopBgP }} ></div>
					<div title='播放列表' className='playlist bg' onClick={() => { this.changeShow() }}></div>
					<ul className='playlistul' style={{ display: ShowListStyleFlag }}>
						{playList.length === 0 ? (<li>播放列表为空哦！</li>) : playList.map((item, index) => (
							<li className={currentPlayIndex === index ? 'active' : 'red'} title={item.name} key={item.id}><span className='index'>{index + 1}</span> &nbsp;<span onClick={() => { this.changeCurrentPIndex(index) }} className='text'>{item.name}</span><span className='del' onClick={() => { this.deleteC(index) }}>删除</span></li>
						))}
					</ul>
				</div>
			</Fragment>
		)
	}
}
